<template>
    <div id="algorithms">
        <el-table
                :data="tableData"
                style="width: 100%"
                stripe
                @row-click="toSolve"
        >
            <el-table-column
                    prop="status"
                    label="状态"
                    width="100"
            >
                <template slot-scope="scope">
                    <i v-if="scope.row.status === 0" class="iconfont icon-line"></i>
                    <i v-if="scope.row.status === 1" class="iconfont icon-hook"></i>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="题目"
                    width="200"
            >
                <template slot-scope="scope">
                    <span class="textHover">{{scope.row.id + '.' + scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="problemSolution"
                    label="题解"
                    width="180"
                    sortable
            >
                <template slot-scope="scope">
                    <span class="textHover">{{scope.row.problemSolution}}</span><i class="iconfont icon-video"></i>
                </template>
            </el-table-column>
            <el-table-column
                    prop="passingRate"
                    label="通过率"
                    width="180"
                    sortable
                    :formatter="rateFormatter"
            >
            </el-table-column>
            <el-table-column
                    prop="difficulty"
                    label="难度"
                    width="180"
                    sortable
            >
                <template slot-scope="scope">
                   <span v-if="scope.row.difficulty === 1" class="text-green">简单</span>
                   <span v-if="scope.row.difficulty === 2" class="text-yellow">中等</span>
                   <span v-if="scope.row.difficulty === 3" class="text-red">困难</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="occurrence"
                    label="出现频率"
                    width="180"
                    sortable
                    :formatter="rateFormatter"
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "Algorithms",
        data() {
            return {
                tableData: [
                    {
                        id:1,
                        status: 1,
                        name:"两数之和",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },
                    {
                        id:2,
                        status: 0,
                        name:"两数相加",
                        problemSolution:154,
                        passingRate:0.451,
                        difficulty:2,
                        occurrence:0.82
                    },
                    {
                        id:3,
                        status: 0,
                        name:"无重复字符的最长子串",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },
                    {
                        id:4,
                        status: 1,
                        name:"两数之和",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },
                    {
                        id:5,
                        status: 0,
                        name:"两数相加",
                        problemSolution:154,
                        passingRate:0.451,
                        difficulty:2,
                        occurrence:0.82
                    },
                    {
                        id:6,
                        status: 0,
                        name:"无重复字符的最长子串",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },{
                        id:7,
                        status: 1,
                        name:"两数之和",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },
                    {
                        id:8,
                        status: 0,
                        name:"两数相加",
                        problemSolution:154,
                        passingRate:0.451,
                        difficulty:2,
                        occurrence:0.82
                    },
                    {
                        id:9,
                        status: 0,
                        name:"无重复字符的最长子串",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },{
                        id:10,
                        status: 1,
                        name:"两数之和",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },
                    {
                        id:11,
                        status: 0,
                        name:"两数相加",
                        problemSolution:154,
                        passingRate:0.451,
                        difficulty:2,
                        occurrence:0.82
                    },
                    {
                        id:12,
                        status: 0,
                        name:"无重复字符的最长子串",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },
                    {
                        id:13,
                        status: 1,
                        name:"两数之和",
                        problemSolution:456,
                        passingRate:0.742,
                        difficulty:1,
                        occurrence:0.82
                    },
                    {
                        id:14,
                        status: 0,
                        name:"两数相加",
                        problemSolution:154,
                        passingRate:0.451,
                        difficulty:2,
                        occurrence:0.82
                    },
                ]
            }
        },
        methods: {
            rateFormatter(row, column){
                return row.passingRate * 100 + "%"
            },
            toSolve(row, column, event){
                console.log(1)
                this.$router.push("/console")
            }
        },
        created() {
        },
        mounted() {
        }
    }
</script>

<style lang="scss">
    #algorithms {
        width: 67.5%;
        margin: 0 auto;
        margin-top: 10px;
    }
    .text-green{
        --tw-text-opacity: 1;
        color: rgba(0,175,155,var(--tw-text-opacity));;
    }
    .text-yellow {
        --tw-text-opacity: 1;
        color: rgba(255,184,0,var(--tw-text-opacity));
    }
    .text-red {
        --tw-text-opacity: 1;
        color: rgba(255,45,85,var(--tw-text-opacity));
    }
    .textHover:hover{
        --tw-text-opacity: 1;
        color: rgba(0,122,255,var(--tw-text-opacity));
    }
    .cell{
        cursor: pointer !important;
    }
</style>
